<!-- #docplaster -->
<!-- #docregion -->
<h1>Structural Directives</h1>

<p>Conditional display of hero</p>

<blockquote>
  <!-- #docregion asterisk -->
  <div *ngIf="hero" class="name">{{hero.name}}</div>
  <!-- #enddocregion asterisk -->
</blockquote>

<p>List of heroes</p>

<ul>
  <li *ngFor="let hero of heroes">{{hero.name}}</li>
</ul>

<hr />

<h2 id="ngIf">NgIf</h2>

<p *ngIf="true">Expression is true and ngIf is true. This paragraph is in the DOM.</p>
<p *ngIf="false">Expression is false and ngIf is false. This paragraph is not in the DOM.</p>

<p [style.display]="'block'">Expression sets display to "block". This paragraph is visible.</p>
<p [style.display]="'none'">
  Expression sets display to "none". This paragraph is hidden but still in the DOM.
</p>

<h4>NgIf with template</h4>
<p>&lt;ng-template&gt; element</p>
<!-- #docregion ngif-template -->
<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>
<!-- #enddocregion ngif-template -->

<hr />

<h2 id="ng-container">&lt;ng-container&gt;</h2>

<h4>*ngIf with a &lt;ng-container&gt;</h4>

<button type="button" (click)="hero = hero ? null : heroes[0]">Toggle hero</button>

<!-- #docregion ngif-ngcontainer -->
<p>
  I turned the corner
  <ng-container *ngIf="hero"> and saw {{hero.name}}. I waved </ng-container>
  and continued on my way.
</p>
<!-- #enddocregion ngif-ngcontainer -->

<p>
  I turned the corner
  <span *ngIf="hero"> and saw {{hero.name}}. I waved </span>
  and continued on my way.
</p>

<p><em>&lt;select&gt; with &lt;span&gt;</em></p>

<div>
  Pick your favorite hero (<label for="show-sad"
    ><input id="show-sad" type="checkbox" checked (change)="showSad = !showSad" />show sad</label
  >)
</div>
<select [(ngModel)]="hero">
  <span *ngFor="let h of heroes">
    <span *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </span>
  </span>
</select>

<p><em>&lt;select&gt; with &lt;ng-container&gt;</em></p>
<!-- #docregion select-ngcontainer -->
<div>
  Pick your favorite hero (<label for="showSad"
    ><input id="showSad" type="checkbox" checked (change)="showSad = !showSad" />show sad</label
  >)
</div>
<select [(ngModel)]="hero">
  <ng-container *ngFor="let h of heroes">
    <ng-container *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </ng-container>
  </ng-container>
</select>
<!-- #enddocregion select-ngcontainer -->
<br /><br />

<hr />

<h2 id="ngFor">NgFor</h2>

<div class="box">
  <p class="code">
    &lt;div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById"
    [class.odd]="odd"&gt;
  </p>
  <!--#docregion inside-ngfor -->
  <div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
    ({{i}}) {{hero.name}}
  </div>

  <!--#enddocregion inside-ngfor -->
  <p class="code">
    &lt;ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd"
    [ngForTrackBy]="trackById"/&gt;
  </p>
  <!--#docregion inside-ngfor -->
  <ng-template
    ngFor
    let-hero
    [ngForOf]="heroes"
    let-i="index"
    let-odd="odd"
    [ngForTrackBy]="trackById"
  >
    <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
  </ng-template>
  <!--#enddocregion inside-ngfor -->
</div>
<hr />

<h2 id="ngSwitch">NgSwitch</h2>

<div>Pick your favorite hero</div>
<p>
  <label for="hero-{{h}}" *ngFor="let h of heroes">
    <input id="hero-{{h}}" type="radio" name="heroes" [(ngModel)]="hero" [value]="h" />{{h.name}}
  </label>
  <label for="none-of-the-above"
    ><input id="none-of-the-above" type="radio" name="heroes" (click)="hero = null" />None of the
    above</label
  >
</p>

<h4>NgSwitch</h4>

<div [ngSwitch]="hero?.emotion">
  <app-happy-hero *ngSwitchCase="'happy'" [hero]="hero!"></app-happy-hero>
  <app-sad-hero *ngSwitchCase="'sad'" [hero]="hero!"></app-sad-hero>
  <app-confused-hero *ngSwitchCase="'confused'" [hero]="hero!"></app-confused-hero>
  <app-unknown-hero *ngSwitchDefault [hero]="hero!"></app-unknown-hero>
</div>

<h4>NgSwitch with &lt;ng-template&gt;</h4>
<div [ngSwitch]="hero?.emotion">
  <ng-template ngSwitchCase="happy">
    <app-happy-hero [hero]="hero!"></app-happy-hero>
  </ng-template>
  <ng-template ngSwitchCase="sad">
    <app-sad-hero [hero]="hero!"></app-sad-hero>
  </ng-template>
  <ng-template ngSwitchCase="confused">
    <app-confused-hero [hero]="hero!"></app-confused-hero>
  </ng-template>
  <ng-template ngSwitchDefault>
    <app-unknown-hero [hero]="hero!"></app-unknown-hero>
  </ng-template>
</div>

<hr />

<hr />

<h2 id="appIfLoaded">IfLoadedDirective</h2>
<app-hero></app-hero>

<hr />

<h2 id="appTrigonometry">TrigonometryDirective</h2>

<!-- #docregion appTrigonometry -->
<ul *appTrigonometry="30; sin as s; cos as c; tan as t">
  <li>sin(30°): {{ s }}</li>
  <li>cos(30°): {{ c }}</li>
  <li>tan(30°): {{ t }}</li>
</ul>
<!-- #enddocregion appTrigonometry -->
